<template>
<!-- 投注记录 -->
<div id="ticketRecord">
	<header class="mui-bar mui-bar-nav header">
		<div class="mui-icon mui-icon-left-nav mui-pull-left" @tap="$router.go(-1)"></div>
		<h1 class="mui-title">{{routerTitle}}</h1>
	</header>
	<div class="mui-content">
		<pullRefresh @refresh="toRefresh">
			<div class="order-list">
				<ul class="mui-table-view">
						<li class="mui-table-view-cell">
							<div class="li-date">
								<span style="width:110px;text-align:left;">投注期号</span>
								<span style="width:70px;text-align: center;">投注金额</span>
								<span style="width:100px;text-align: right;">是否结算</span>
							</div>
						</li>
						<li class="mui-table-view-cell" v-for="(item,index) in records" @tap="showTicketNum(index)">
							<div class="li-date">
								<span style="width:110px;text-align:left;">{{item.myNumber}}</span>
								<span style="width:70px;text-align: center;">{{item.money}}</span>
								<span :style="item.resultMoney>0?'font-weight:700;width:100px;text-align:right':'width:100px;text-align:right'">{{item.recall?'已撤销':(item.status?(item.resultMoney==0?'已亏损':'盈利'+item.resultMoney):'等待结算')}}</span>
							</div>
							<p>{{new Date(item.time).toLocaleString('chinese',{hour12:false})}} {{item.type | ticketName}} 查看投注号码</p>
						</li>
				</ul>
			</div>
		</pullRefresh>
		<!-- 分页 -->
		<div v-if="pageNum>1" class="pageNav">
			<button :style="curPage==1?'opacity:.2':''" @tap="changePage(-1)" type="button" class="mui-btn mui-btn-primary">«上一页</button>
			<select v-model="curPage">
				<option v-for="i in pageNum" :value="i">{{i}}/{{pageNum}}</option>
			</select>
			<button :style="curPage==pageNum?'opacity:.2':''" @tap="changePage(1)" type="button" class="mui-btn mui-btn-primary">下一页»</button>
		</div>
	</div>
	<div id="ticketNumBox" :style="showTicketNumber?'left:0':'left:100%'">
		<span class="mui-icon mui-icon-close" @tap="showTicketNumber=false"></span>
		<h3>投注号码</h3>
		<p>{{curTicketName | ticketName}}</p>
		<ul class="mui-table-view" style="margin-top: 40px;">
			<li v-if="ticketNumber.one && ticketNumber.one!=''" class="mui-table-view-cell">冠：{{ticketNumber.one}}</li>
			<li v-if="ticketNumber.two && ticketNumber.two!=''" class="mui-table-view-cell">亚：{{ticketNumber.two}}</li>
			<li v-if="ticketNumber.three && ticketNumber.three!=''" class="mui-table-view-cell">季：{{ticketNumber.three}}</li>
			<li v-if="ticketNumber.four && ticketNumber.four!=''" class="mui-table-view-cell">肆：{{ticketNumber.four}}</li>
			<li v-if="ticketNumber.five && ticketNumber.five!=''" class="mui-table-view-cell">伍：{{ticketNumber.five}}</li>
			<li v-if="ticketNumber.six && ticketNumber.six!=''" class="mui-table-view-cell">陆：{{ticketNumber.six}}</li>
			<li v-if="ticketNumber.seven && ticketNumber.seven!=''" class="mui-table-view-cell">柒：{{ticketNumber.seven}}</li>
			<li v-if="ticketNumber.eight && ticketNumber.eight!=''" class="mui-table-view-cell">捌：{{ticketNumber.eight}}</li>
			<li v-if="ticketNumber.nine && ticketNumber.nine!=''" class="mui-table-view-cell">玖：{{ticketNumber.nine}}</li>
			<li v-if="ticketNumber.ten && ticketNumber.ten!=''" class="mui-table-view-cell">拾：{{ticketNumber.ten}}</li>
		</ul>
		<div class="recall" @tap="recall">撤销此下注</div>
	</div>
</div>
</template>

<script>
import pullRefresh from "@/components/pullRefresh"
import {myTicketRecord,recallMyTicket} from "@/api/my"
export default{
	name:"ticketRecord",
	components:{
		  pullRefresh
	},
	data(){
		return{
			curPage:1,
			pageNum:1,
			records:[],
			ticketNumber:{
				"one":'',"two":'',"three":'',"four":'',"five":'',"six":'',"seven":'',"eight":'',"nine":'',"ten":''
			},
			curTicketName:"",
			curTicketId:"",
			showTicketNumber:false
		}
	},
	filters:{
		ticketName(val){
			let ticketName;
			switch (val){
				case 'XYFT':
				ticketName = "幸运飞艇"
					break;
				case 'JSSC':
				ticketName = "极速赛车"
					break;
				case 'JSFT':
				ticketName = "极速飞艇"
					break;
				case 'TXFFC':
				ticketName = "腾讯分分彩"
					break;
				case 'HN5FC':
				ticketName = "河内5分彩"
					break;
			}
			return ticketName;
		}
	},
	watch:{
		curPage(val){
			this.getTicketRecordByPage(val)
		}
	},
	mounted(){
		this.getTicketRecordByPage(1)
	},
	methods:{
		getTicketRecordByPage(page,callback){
			mui.showLoading("等待中..", "div");
			myTicketRecord({page}).then(res=>{
				this.pageNum = res.pageNum
				this.records = res.records
				mui.hideLoading()
				callback && callback()
			})
		},
		changePage(e){
			if(e==-1){
				if(this.curPage==1){
					return;
				}else{
					this.curPage--
				}
			}else{
				if(this.curPage==this.pageNum){
					return;
				}else{
					this.curPage++
				}
			}
		},
		showTicketNum(index){
			let ticketData = this.records[index]
			
			for (let key in this.ticketNumber) {
				this.ticketNumber[key] = ticketData[key]
			}
			
			this.showTicketNumber = true
			
			this.curTicketName = ticketData.type
			this.curTicketId = ticketData.id
		},
		recall(){
			mui.showLoading("撤销中..", "div");
			recallMyTicket(this.curTicketId).then(res=>{
				if(res.message){
					mui.toast(res.message)
				}else{
					mui.toast("撤销成功！")
					this.getTicketRecordByPage(1,()=>{
						this.showTicketNumber = false
					})
				}
				mui.hideLoading()
			})
		},
		toRefresh(callback){
			 //这里进行重新加载数据操作
			 this.getTicketRecordByPage(1,()=>{
				callback()
			 })
		}
	}
}
</script>
<style scoped>
	.recall{
		text-align: center;
		line-height: 38px;
		height: 38px;
		border-radius: 5px;
		color: #fff;
		background: #673AB7;
		padding: 0 15px;
		display: inline-block;
		position: fixed;
		bottom: 50px;
		transform: translateX(-50%);
	}
</style>